<template>
	<div id="login">
		<com-head>登录</com-head>
		<div class="top"></div>
		<div class="posi">
			<div class="title">登录</div>
			<div class="inp one">
				<input type="text" placeholder="请输入手机号：" v-model="user.tel">
			</div>
			<div class="inp">
				<input type="password" v-on:keyup.enter="login" placeholder="请输入密码：" v-model="user.password">
			</div>
			<div class="btn">
				<button @click="login">立即登陆</button>
				<router-link tag="button" to='registery'> 注册</router-link>
			</div>
			<div class="bootm"> <router-link tag="span" to='index'><span>返回首页</span></router-link></div>
		</div>
	</div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      user: {
        tel: "",
        password: "",
        userid: ""
      },
      remember: false
    };
  },
  created() {
    // this.readPass();
  },
  methods: {
    login() {
      if (!this.user.tel || !this.user.password) {
        this.$bus.$emit("toast", "账号/密码不能为空");
      } else {
        this.axios
          .post("Login/dologin", {
            username: this.user.tel,
            password: this.user.password
          })
          .then(response => {
            if (response.data == "1") {
              this.$bus.$emit("toast", "用户名或密码错误");
            } else {
              console.log(response);
              // hasEnter=1;
              this.user.userid = response.data;
              this.$bus.$emit("toast", "登录成功");
              this.$router.push("index");
              this.passMemory();
            }
          });
      }
    },
    passMemory() {
      let user = {};
      user.tel = this.user.tel;
      user.password = this.user.password;
      user.userid = this.user.userid;
      localStorage.fencaike = JSON.stringify(user);
      // console.log(localStorage);
    },
    // 如果有密码读取
    readPass() {
      if (localStorage.fencaike) {
        let MemoryUser = JSON.parse(localStorage.fencaike);
        this.user.tel = MemoryUser.phone;
        this.user.password = MemoryUser.password;
        this.remember = MemoryUser.memory;
        console.log(MemoryUser.memory);
      }
    }
  }
};
</script>

<style lang="scss">
#login {
  padding-top: 67px;
  .icon-ziyuan {
    display: none;
  }
  .top {
    height: 502px;
    background: url("../assets/images/login.png");
    background-size: 100% 100%;
    width: 100%;
  }
  .posi {
    position: absolute;
    width: 100%;
    top: 566px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #e69414;
    background: linear-gradient(left top, #e69414, #e69414);
    .title {
      height: 100px;
      line-height: 100px;
      text-align: center;
      color: rgba(255, 255, 255, 1);
      color: white;
      margin-bottom: 20px;
    }
    .inp {
      margin: 0 50px;
      background: #ee4646;
      height: 62px;
      border-radius: 10px;
      margin-bottom: 30px;
      input {
        color: white;
      }
      input::-webkit-input-placeholder {
        /* WebKit browsers */
        color: white;
        font-size: 24px;
      }
      input:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: white;
        font-size: 24px;
      }

      input::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: white;
        font-size: 24px;
      }

      input:-ms-input-placeholder {
        /* Internet Explorer 10+ */

        color: white;

        font-size: 24px;
      }
      input {
        width: 100%;
        height: 100%;
        background: transparent;
        font-size: 24px;
        padding-left: 32px;
      }
    }
    .btn {
      margin: 0 60px;
      text-align: center;
      display: flex;
      justify-content: space-between;
      button {
        width: 100%;
        height: 62px;
        background: #f5c632;
        border-radius: 10px;
        color: white;
        font-size: 28px;
        margin-top: 70px;
      }
      button:nth-of-type(1) {
        width: 60%;
      }
      button:nth-of-type(2) {
        width: 30%;
      }
    }
    .bootm {
      margin: 0 80px;
      color: white;
      font-size: 25px;
      margin-top: 50px;
      float: right;
    }
  }
}
</style>
